<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌瑞森登录</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        html,body{
            width:100%;
            height:100%;
        }
        .bg{
            background:url("images/banner5.png") no-repeat center center;
            background-size:cover;
            width:100%;
            height:100%;
            position:relative;
        }
        .top{
            display:flex;

        }
        .top .logo{
            position:absolute;
            left:20px;
            top:10px;
        }
        .top .zhuce{
            position:absolute;
            right: 40px;
            top:30px;
            color:#fff;
            font-weight: 600;
        }
        .btn{
            position:absolute;
            bottom:10px;
            text-indent:20px;
            color:#fff;
            font-weight:600;
        }

        .form{
            position:absolute;
            top:160px;
            right:250px;
            background:rgba(255,255,255,0.8);
            width:340px;
            padding:20px;
        }
        .form .dl{
            font-size: 18px;
            font-weight: 700;
            height:40px;
            line-height:40px;
            text-align:center;
        }
        .form .kuang{
            width:290px;
            margin:0 auto;
        }
        .form .kuang img{
            width:37px;
            padding:2px;
            box-sizing: border-box;
            border:1px solid #999;
            vertical-align: middle;
            border-right:none;
            margin-top: 1px;
        }
        .form .kuang input{
            background:none;
            border:1px solid #999;
            padding:10px;
            width:230px;
            height:38px;
            box-sizing: border-box;
            margin:10px 0;
        }
        .form .text{
            display:flex;
            justify-content: space-between;
            height:30px;
            line-height:30px;
            font-size:12px;
            margin:20px 22px;
        }
        .form .denglubtn{
            margin:10px auto;
            width:140px;
            color:#fff;
        }
        .form .denglubtn input{
            background:#1a65e6;
            color:#ffffff;
            text-align: center;
            border:none;
            padding:10px;
            width:140px;
        }
        #phoneerror,#pwderror{
           color:red;
            font-size:10px;
        }


    </style>
</head>
<body>
<div class="bg">
    <div class="top"><div class="logo"><img src="images/logo.png"></div><div class="zhuce">立即注册 | 登录</div></div>
    <div class="bg2">
        <div class="form">
            <form>
                <div class="dl">登录</div>
                <div class="kuang"><img src="images/user.png"><input placeholder="邮箱/微信号/QQ号" id="phone" /><div id="phoneerror"></div></div>
                <div class="kuang"><img src="images/pwd.png"><input placeholder="密码" id="pwd" name="pwd" /><div id="pwderror"></div></div>
                <div class="text"><span><a href="#">记住账号</a></span> <span><a href="#">忘记密码</a></span></div>
                <div class="denglubtn"><input type="button" value="登录" id="login" /></div>
            </form>
        </div>
    </div>
    <div class="btn">版权所有 2014-2016 ICP备15018859号 歌瑞森官网</div>
</div>

<script>

    var rightTel = "18009688825";
    var rightPassword = "lss12345";

    login.onclick= function(){
        if(rightTel==phone.value){
            phoneerror.innerHTML="";
            if(rightPassword==pwd.value){
                pwderror.innerHTML="";
                alert("登录成功！")
            }else{
                pwderror.innerHTML="您输入的密码不正确！"
            }
        }else{
            phoneerror.innerHTML="您输入的账号有误！"
        }
    }
</script>
</body>
</html>